<template>
  <page-header-wrapper :title="false">
    <a-card title="IP列表">
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="ip地址">
                <a-input v-model="queryParam['filter[ip]']" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click='resetIpForm'>重置</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <template slot='extra'>
        <a-button type='primary' icon='plus' @click='onModal'>添加IP</a-button>
      </template>
      <s-table
        bordered
        ref="table"
        size="middle"
        :columns="ipColumns"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :row-key="(record) => record.id"
        :data="ipData"
      >
        <template slot="title">
          <a-button :disabled="selectedRowKeys.length == 0" type="primary" size="small" style="margin-right: 5px" @click="batchDel">批量删除
          </a-button>
          <a-button :disabled="selectedRowKeys.length == 0" type="primary" size="small" @click="batchRemark">批量备注</a-button>
        </template>
        <template slot="remark" slot-scope="text,record">
          <a-button v-if="text != ''" type="link" icon="edit" @click="onRemark(record.id)">{{text}}</a-button>
        </template>
        <template slot='action' slot-scope="text, record">
          <a-button size="small" type="danger" @click='deleteIp(record.id)'>删除</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title='添加IP黑名单'
      v-model='visible'
      @ok="addIP"
    >
      <a-form-model
        :model="ipForm"
      >
        <a-form-model-item label="IP">
          <a-input type="text" v-model="ipForm['ip']" />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-textarea v-model="ipForm['remark']" :rows="3" placeholder="备注"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title='批量备注信息'
      v-model='visible2'
      @ok="onSubmit"
    >
      <a-form-model
        ref="remarkForm"
        :model="remarkForm"
      >
        <a-form-model-item label="IP备注">
          <a-textarea v-model="remarkForm.remark" :rows="3" placeholder="请输入IP备注"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title='备注信息'
      v-model='visible3'
      @ok="onSubmit2"
    >
      <a-form-model
        ref="remarkForm"
        :model="remarkForm"
      >
        <a-form-model-item label="IP备注">
          <a-textarea v-model="remarkForm.remark" :rows="3" placeholder="请输入IP备注"></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/ip'
  import { getIpList, addIp, delIp, editRemark } from '@/api/ip'

  export default {
    components: {
      STable
    },
    name: 'IpConfig',
    data () {
      return {
        ipColumns: col.ip,
        ipData: parameters => {
          return getIpList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        ipForm: {},
        remarkForm: {},
        visible: false,
        visible2: false,
        visible3: false,
        selectedRowKeys: []
      }
    },
    methods: {
      onModal () {
        this.visible = true
      },
      addIP () {
        const app = this
        const data = {}
        data['ip[ip]'] = app.ipForm.ip
        data['ip[remark]'] = app.ipForm.remark
        addIp(app.ipForm).then(res => {
          if (res.status === 0) {
            app.$refs.table.refresh(true)
            app.visible = false
            app.ipForm = {}
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      },
      resetIpForm () {
        this.ipForm = {}
      },
      deleteIp (id) {
        const app = this
        const arr = []
        const params = {}
        arr[0] = id
        params['id'] = arr
        app.$confirm({
          title: '确定删除此条ip',
          onOk: () => {
            delIp(params).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onRemark (id) {
        this.remarkForm = {}
        this.remarkForm['id'] = id
        this.visible3 = true
      },
      onSubmit2 () {
        const app = this
        const data = {}
        const arr = []
        const params = {}
        arr[0] = app.remarkForm.id
        data['remark'] = app.remarkForm.remark
        params['id'] = arr[0]
        editRemark(params, data).then(res => {
          app.visible3 = false
          app.$refs.table.refresh(true)
        })
      },
      batchRemark () {
        this.remarkForm = {}
        this.visible2 = true
      },
      onSubmit () {
        const app = this
        const data = {}
        const params = {}
        params['id'] = app.selectedRowKeys
        data['remark'] = app.remarkForm.remark
        editRemark(params, data).then(res => {
          app.visible2 = false
          app.$refs.table.refresh(true)
        })
      },
      batchDel () {
        const app = this
        const params = {}
        params['id'] = app.selectedRowKeys
        app.$confirm({
          title: '是否执行删除命令',
          onOk: () => {
            delIp(params).then(res => {
              if (res.status === 0) {
                app.$refs.table.refresh(true)
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      },
      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      }
    }
  }
</script>

<style scoped>

</style>
